<template>
    <div>
        <header>
            <div class="mdui-container">
                <div class="mdui-row mdui-valign">
                    <div class="mdui-col-lg-2">
                        <div class="logo"></div>
                    </div>
                    <div class="mdui-col-lg-8">
                        <div class="menu">
                            <a class="active" href="">首页</a>
                            <a href="#">哈士奇</a>
                            <a href="#">沙皮</a>
                            <a href="#">拉布拉多</a>
                            <a href="#">吉娃娃</a>
                            <a href="#">牛头</a>
                            <a href="#">博美</a>
                            <a href="#">柴犬</a>
                            <a href="#">金毛</a>
                        </div>
                    </div>
                    <div class="mdui-col-lg-2 mdui-text-right">
                        <div class="tool">
                            <i class="mdui-icon material-icons mdui-text-color-brown-300 search">search</i>
                            <i class="mdui-icon material-icons mdui-text-color-brown-300 account">account_box</i>
                            <i class="mdui-icon material-icons mdui-text-color-brown-300 shopping">add_shopping_cart</i>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </div>
</template>

<script>
    export default {
        name: "Header"
    }
</script>

<style scoped>
    header {
        height: 60px;
    }

    .logo {
        display: block;
        width: 105px;
        height: 35px;
        margin-top: 10px;
        background: url("http://yanxuan-static.nosdn.127.net/hxm/yanxuan-component/p/20170601/style/img/x1/icon-yxtop-sc6353bfedb-173a41cd9d.png") 0 -216px;
    }

    .menu {
        display: flex;
        height: 35px;
        justify-content: space-between;
        align-items: flex-end;
    }

    .menu a {
        text-decoration: none;
        color: black;
        font-weight: 600;
    }

    .menu a:active, a.active {
        color: #b4a078;
        border-bottom: 3px solid #b4a078;
    }

    header .tool {
        height: 35px;
        display: inline-flex;
        justify-content: center;
        align-items: flex-end;
    }

    header .tool > i {
        width: 40px;
    }

</style>